<!--
 * @Author: lxw
 * @Date: 2021-02-09 10:13:37
 * @Description: 首页-内容块组件
 -->
<template>
  <div>
    <ul class="tag__list">
      <li
        v-for="item in tagList"
        :key="item.key"
        :class="['tag__item', { 'tag__item--active': tagListActive === item.key }]"
        @click="changeTag(item)"
      >
        {{ item.title }}
      </li>
    </ul>

    <GirlList v-if="tagListActive === 'Girl' || tagListActive === 'All'" />
    <ArticleList
      v-else
      :key="articleType"
      category="All"
      :type="articleType"
    />
  </div>
</template>

<script>
import GirlList from '@/components/GirlList'
import ArticleList from '@/components/ArticleList'
export default {
  name: 'Content',
  components: { ArticleList, GirlList },
  data () {
    return {
      tagList: [
        { title: '最新', key: 'All' },
        { title: '妹纸', key: 'Girl' },
        { title: 'Android', key: 'Android' },
        { title: 'Flutter', key: 'Flutter' },
        { title: 'iOS', key: 'iOS' },
        { title: '前端', key: 'frontend' },
        { title: '后端', key: 'backend' },
        { title: 'App', key: 'app' }
      ],
      tagListActive: 'All',
      articleType: ''
    }
  },
  methods: {
    changeTag (item) {
      this.tagListActive = item.key
      this.articleType = item.key
    }
  }
}
</script>

<style scoped lang="scss">
.tag {
  &__list {
    @include flex;
    margin-top: 24px;
  }
  &__item {
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    color: $text-color-secondary;
    cursor: pointer;

    &:hover {
      color: $color-primary;
      text-decoration: underline;
    }

    &--active {
      border-radius: 3px;
      background: $color-primary;
      color: $text-color-regular;
      position: relative;

      &:hover {
        color: $text-color-regular;
        text-decoration: none;
      }

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -5px;
        margin-left: -6px;
        width: 0;
        height: 0;
        border-width: 5px 6px 0 6px;
        border-style: solid;
        border-color: $color-primary transparent transparent transparent;
      }
    }
  }
}
</style>
